<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container" >

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="openDialog"
        v-show="this.list.length < 5 ? true : false"
      >新增</el-button>

    </div>

    <!-- 查询结果 -->
    <div>
      <el-table
        v-loading="listLoading"
        :data="list"
        size="small"
        element-loading-text="正在查询中。。。"
        :height="tabHeight"
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="200px" label="图书编号" prop="bookId"/>
        <el-table-column align="center" width="200px" label="书名" prop="bookName"/>
        <el-table-column align="center" width="200px" label="作者" prop="author"/>
        <el-table-column align="center" width="200px" label="出版社" prop="publisher"/>
        <el-table-column
          align="center"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteBook(scope.row)">下架热门图书</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!--    编辑或新增 弹框-->
    <el-dialog
      title="修改图书基本信息"
      :visible.sync="showDialog"
      width="30%">
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="图书编号">
          <el-input v-model="dialogForm.bookId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addHotBook">确定</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "bookHot",
        data(){
            return{
                dialogForm: {
                    bookId:'',
                    bookState:0,
                },
                list:[],
                listLoading: false,
                tabHeight: 540,
                showDialog:false,

            }
        },

        created() {
            this.queryList(1)
        },

        methods: {

            //将记录图书原本的数据
            openDialog(){
                if(this.list.length >= 5){
                    this.$message.error("最多只能上架5本热门书籍")
                }else {
                    this.showDialog = true
                }
            },

            //下架热门图书
            deleteBook(row){
                this.$confirm('《' + row.bookName + '》将被取消热门图书, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let self = this
                    self.listLoading = true
                    self.$axios.get("/manage/book/updateBookHot",{
                        params:{
                            bookId: row.bookId,
                            hotState: 0
                        }
                    }).then(res =>{
                        try {
                            self.list = res.data.data
                            self.listLoading = false
                        }catch(err){
                            self.listLoading = false
                            self.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        self.$message.error("查询出错！！！！！")
                        self.listLoading = false
                    })

                }).catch(() => {
                })
            },

            //上架热门图书商品
            addHotBook(row){
                let self = this
                self.listLoading = true
                self.$axios.get("/manage/book/updateBookHot",{
                    params:{
                        bookId: this.dialogForm.bookId,
                        hotState: 1
                    }
                }).then(res =>{
                    try {
                        self.list = res.data.data
                        self.total = res.data.total
                        self.listLoading = false
                    }catch(err){
                        self.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.listLoading = false
                })
                self.showDialog = false
            },

            handleSizeChange(size){
                this.queryList()
            },
            handleCurrentChange(current){
                this.queryList(current)
            },

            queryList(){
                const self = this
                self.listLoading = true
                self.$axios.get('/manage/book/hotBook').then(res =>{
                    try {
                        self.list = res.data.data
                        self.listLoading = false
                    }catch(err){
                        self.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.listLoading = false
                })
            },
        }
    }
</script>

<style scoped>

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
